<!-- components/ContentList.vue -->
<template>
    <div class="content-list">
        <div v-for="(item, index) in items" :key="index" class="list-item">
            <NuxtLink :to="getDetailPath(item)">
                <div class="item-main">
                    <h3>{{ item.title }}</h3>
                    <div class="meta">
                        <span class="date">{{ item.date }}</span>
                    </div>
                </div>
            </NuxtLink>
        </div>
    </div>
</template>

<script setup>
const localePath = useLocalePath()
const props = defineProps({
    items: {
        type: Array,
        required: true,
        validator: items => items.every(i =>
            'title' in i && 'date' in i && 'id' in i
        )
    },
    type: {
        type: String,
        default: 'common'
    },
    prevtype: {
        type: String,
        default: 'party'
    }
})

const getDetailPath = (item) => {
  // 党务专题特殊处理
  if(props.prevtype === 'party') {
    return localePath(`/party/${props.type}/${item.id}`)
  }
  if(props.prevtype === 'projects') {
    return localePath(`/projects/${props.type}/${item.id}`)
  }
  if(props.prevtype === 'members'){
    return localePath(`/members/${props.type}/${item.id}`)
  }
//   return `/articles/${item.id}`
}
</script>

<style lang="scss" scoped>
.content-list {
    --border-color: #F6F6F6;
    --text-color: #333333;
    --date-color: #999999;
    --hover-color: #1867CA;

    .list-item {
        padding: .8rem 0;
        border-bottom: var(--border-color) 1px solid;
        width: 100%;
        position: relative;

        a {
            display: block;
            text-decoration: none;
        }

        .item-main {
            display: flex;

            h3 {
                color: var(--text-color);
                font-size: 1em;
                width: 86%;
                margin-right: calc(4% - 1rem);
                font-weight: normal;
                margin-left: 1rem;
                cursor: pointer;
            }

            .meta {
                color: var(--date-color);
                font-size: 1rem;
                width: 12%;
                text-align: right;
            }
        }

        &::before {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            // left: 4.5rem;
            width: 0;
            height: 0;
            border-left: .6rem solid var(--hover-color);
            /* 左边框透明 */
            border-right: .6rem solid transparent;
            /* 右边框为黑色 */
            border-top: .4rem solid transparent;
            /* 上边框透明 */
            border-bottom: .4rem solid transparent;
        }

        &:hover {
            .item-main {
                h3 {
                    color: var(--hover-color);
                }
            }

            &::before {
                border-left: .6rem solid var(--hover-color);
                /* 左边框透明 */
                border-right: .6rem solid transparent;
                /* 右边框为黑色 */
                border-top: .4rem solid transparent;
                /* 上边框透明 */
                border-bottom: .4rem solid transparent;
            }
        }
    }

    @media (max-width: 480px) {
        .list-item {
            .item-main{
                h3 {
                    font-size:.875rem;
                    width:70%;
                    margin-right:.5rem;
                    margin-left:0;
                }
                .meta {
                  width:calc(30% - .5rem);
                }
            }
            &::before {
              border:none;
            }
            &:hover {
              &::before {
                border:none;
              }
            }
        }
    }
}
</style>